<script setup lang="ts">
import { ref } from 'vue';
const list: any = ref([]);
const loading = ref(false);
const finished = ref(false);
const onLoad = () => {
  // 异步更新数据
  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
  setTimeout(() => {
    for (let i = 0; i < 10; i++) {
      list.value.push(list.value.length + 1);
    }

    // 加载状态结束
    loading.value = false;

    // 数据全部加载完成
    if (list.value.length >= 40) {
      finished.value = true;
    }
  }, 1000);
};
</script>
<template>
  <div class="wrapper">
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell v-for="item in 6" :key="item">
        <template #title>
          <a href="">
          <van-card>
            <template #thumb>
              <div class="img">
                <van-image
                class="cover"
                src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
              />
              </div>
            </template>
            <template #title> 
              <span class="title"><span>演员的自我修养</span>结业证书</span>
            </template>
            <template #desc>
              <div>通过《演员的自我修养》获得</div>
              <van-divider style="color: #333;" dashed></van-divider>
              <div class="get_time">获得日期：2023年3月9日15点10分</div>
            </template>
          </van-card>
        </a>
        </template>
      </van-cell>
    </van-list>
  </div>
</template>

<style scoped lang="scss">
.wrapper {
  .img {
    position: relative;
    .cover {
      height: 80px;
      width: 80px;
    }
  }
  
  .title {
    font-weight: 700;
    font-size: 16px;
  }
  .get_time {
    color: #a4a4a4;
  }
  :deep .van-card {
    background: #fff;
    .van-divider{
      margin: 15px 0 8px;
    }
  }
  padding:0 0 20px;
}
</style>
